<template>
    <div class="main-center">
           <div class="titles">数字果业  长武红</div>
           <div class="show-box" v-if="isshowMsg">
              <div class="name">{{ showMsg.name }}</div>
              <div class="name1">果园面积{{ showMsg.area }}万亩</div>
              <div class="name1">挂果面积{{ showMsg.areaFruiting }}万亩</div>
              <div class="name1">挂果率{{ showMsg.fruitingRatio }}</div>
              <div class="name1">产量{{ showMsg.prodNum }}万吨</div>
              <div class="name1">产值{{ showMsg.prodVal }}亿元</div>
           </div>
          <maps @tipChange="tipChange" @digChange="digChange" :compenyData="datas"/> 
    </div>
</template>
<script>
  import maps from "../components/divMap.vue"
  export default{
    props:['divData'],
    components:{maps},
    data(){
        return{
           showMsg:{},
           centerData:[],
           isshowMsg:false,
           digShow:true,
           showName:"",
          
           datas:[]
        }
    },
    watch:{
      divData: {
            handler(newValue) {
                  // console.log(newValue)
                  this.datas=newValue
            }
        }
    },
    mounted(){
          this.getTown()
    },
    methods:{
      tipChange(e){
         this.isshowMsg=false
         if(this.showName == e.name ){
            this.showName=""
            this.showMsg={}
            this.isshowMsg=false
         }else{
          this.showName=e.name
          this.centerData.forEach((v)=>{
             if(v.name==e.name){
              this.isshowMsg=true
              this.showMsg=v
            }
          })
         }
      },
      //公司弹窗
      digChange(e){
           this.$emit('showDig',e)
      },
      async getTown(){
        let {data:res} = await this.$https.get('control/cms/findAllFruitTown')
        if(res.code!=200)return
        this.centerData = res.data
      }
    }
  }
</script>
<style lang="less" scoped>
@font-face {
  font-family: "SC-song";
  src: url('../assets/siyuanSong.woff');
  font-weight: normal;
  font-style: normal;
}
.main-center {
    flex: 1;
    height: 100%;  
    position: relative;
    .dig-box{
      z-index: 999999;
      position: absolute;
    }
    .titles{
        width: 400px;
        height: 80px;
        background-image: url('../assets/toptitlebg.png');
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        left:calc(50% - 200px) ;
        font-size: 40px;
        font-family: Songti SC;
        font-weight: 900;
        font-style: italic;
        color: #FF5858;
        -webkit-text-stroke: 1px #fff;
        text-align: center;
        line-height: 80px;
        font-family: 'SC-song';
    }
    .show-box{
        width: 300px;
        height: 240px;
        background-image: url('../assets/zhengs.png');
        background-size: 100% 100%;
        z-index: 999999;
        position: absolute;
        padding-left: 40px;
        bottom: 0;
        left: 0px;
        font-size: 16px;
        font-weight: 400;
        color: #FEFFFF;
        .name{
          margin-top:35px;
          font-weight: 600;
          font-size: 16px;
          margin-bottom: 12px;
        }
        .name1{
          margin:7px 0 6px 0;
          padding-left: 10px;
          font-size: 14px;
        }
    }
}
</style>